<template>
  <div>
    <div class="max-box">
      <!-- 头部搜索、操作 -->
      <div class="header-box">
        <div class="header-left">
          <span>工单</span>
        </div>
        <a-input-search
          placeholder="输入工单标题"
          @search="onSearch"
          allow-clear
          class="search-box"
        >
          <a-button slot="enterButton" icon="search"></a-button>
        </a-input-search>
        <a-button type="primary" class="add-btn" @click="openTopDrawer"
          >提交工单</a-button
        >
      </div>
      <!-- 内容区 -->
      <div class="content-box">
        <!-- 标签页 -->
        <div class="content-head">
          <span>共{{ workOrder }}个工单</span>
          <myDrop
            :dropdownList="statusDropdownList"
            :defaultFlag.sync="normalStatus"
            specialText="状态"
          ></myDrop>
          <myDrop
            :dropdownList="overTimeStatus"
            :defaultFlag.sync="overTime"
            class="ml-16"
            specialText="超时状态"
          ></myDrop>
        </div>
        <!-- 表格内容 -->
        <div class="table-box">
          <!-- 表格 -->
          <myTable
            :columns="columns"
            :dataSource="tableData"
            :total="total"
            @changePagination="getTableList"
            :scroll="{ x: 200, y: 450 }"
          >
            <template slot="deviceName" slot-scope="slotData">
              <div @click="toDetail(slotData.scope)" class="name-box">
                {{ slotData.scope.deviceSn }}
              </div>
            </template>
            <template slot="operation" slot-scope="slotData">
              <div class="operation-box">
                <a-icon type="file-add" title="提交工单" />
                <a-icon
                  type="solution"
                  class="icon-left"
                  title="添加维保记录"
                />
              </div>
            </template>
          </myTable>
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
import moment from "moment";
// import echartConfig from "./config/alarmEchart";
export default {
  data() {
    return {
      activeTab: 1,
      tabList: [
        {
          value: "0",
          label: "全部",
        },
        {
          value: "1",
          label: "发生中",
        },
        {
          value: "2",
          label: "已恢复",
        },
      ],
      columns: [
        {
          title: "标题",
          dataIndex: "deviceSn",
          scopedSlots: {
            customRender: "deviceName",
          },
          width: 120,
          fixed: "left",
        },
        {
          title: "编号",
          width: 90,
        },
        {
          title: "状态",
          width: 90,
        },
        {
          title: "超时状态",
          width: 120,
        },
        {
          title: "超时时长",
          width: 120,
        },
        {
          title: "发起人",
          width: 120,
        },
        {
          title: "发起时间",
          width: 120,
        },
        {
          title: "处理人",
          width: 120,
        },

        {
          title: "计划处理时间",
          width: 120,
        },
        {
          title: "计划处理时间",
          width: 120,
        },
        {
          title: "计划处理时间",
          width: 120,
        },
        {
          title: "操作",
          scopedSlots: {
            customRender: "operation",
          },
        },
      ],
      tableData: [
        {
          deviceSn: "88888",
        },
      ],
      total: 0,

      moment,
      defaultFlag: "0",

      //   正常状态
      statusDropdownList: [
        {
          label: "全部",
          value: "0",
        },
        {
          label: "待接受",
          value: "1",
        },
        {
          label: "待处理",
          value: "2",
        },
        {
          label: "执行中",
          value: "3",
        },
        {
          label: "待验证",
          value: "4",
        },
        {
          label: "待评价",
          value: "5",
        },
        {
          label: "已完成",
          value: "6",
        },
        {
          label: "拒绝接受",
          value: "7",
        },
        {
          label: "已撤销",
          value: "8",
        },
      ],
      normalStatus: "0",
      //   超时状态
      overTimeStatus: [
        {
          label: "全部",
          value: "0",
        },
        {
          label: "已超时",
          value: "1",
        },
        {
          label: "未超时",
          value: "2",
        },
      ],
      overTime: "0",

      //工单数量
      workOrder: 0,
    };
  },
  methods: {
    onSearch() {},
    openTopDrawer() {},
    changeTab(value) {
      this.activeTab = value;

      this.getTableList();
    },
    onClose() {
      this.visible = false;
    },
    // 获取表格数据
    getTableList(pageMsg) {
      let requestPage = {
        page: 1,
        limit: 50,
      };
      if (pageMsg?.page) {
        requestPage.page = pageMsg.page;
        requestPage.limit = pageMsg.pageSize;
      }
    },

    drawerVisible() {
      this.visible = !this.visible;
    },

    // 查看详情
    toDetail() {
      this.detailDrawer = true;
      this.getTabName = "交流过频";
      this.$nextTick(() => {
        this.initEcharts();
      });
    },
    closeDetailDrawer() {
      this.detailDrawer = false;
    },
    // 查询警告详情
    getDetail() {},
  },
  mounted() {},
  computed: {},
};
</script>
  <style lang="less" scoped>
.max-box {
  width: 100%;
  padding-top: 16px;
  padding-right: 20px;
  box-sizing: border-box;
  .header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding-right: 20px;
    margin-bottom: 16px;
    .header-left {
      span {
        font-size: 18px;
        color: #252b3a;
      }
      i {
        font-size: 20px;
      }
    }
    .search-box {
      width: 240px;
      height: 32px;
      /deep/.ant-input {
        font-size: 12px;
      }
    }
    .add-btn {
      font-size: 12px;
    }
  }
  .content-box {
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    // tabs
    .content-head {
      display: flex;
      padding: 16px;

      align-items: center;
      span {
        font-size: 14px;
        margin-right: 16px;
      }
    }
    .table-box {
      min-height: 220px;
      .name-box {
        cursor: pointer;
      }
    }

    // 操作样式
    .operation-box {
      width: 100%;
      padding-left: 15px;
      font-size: 16px;
      i {
        cursor: pointer;
        transition: all 0.5s;
        &:hover {
          color: #048fff;
        }
      }
      .icon-left {
        margin-left: 30px;
      }
    }
  }
}
/deep/.screen-drawer {
  .ant-drawer-content-wrapper {
    height: 200px !important;
  }
}
</style>
    